<template>
	<view>
		<view class="headForm">
			<u-form :model="formData" ref="uForm" label-width="160">
				<u-form-item label="船名/航次:" label-width="160">
					<u-input type="select" :select-open="shipShow" v-model="formData.ship"
						placeholder="请选择船名/航次" @click="shipShow = true"></u-input>
				</u-form-item> 
				
				<u-form-item label="理货证明书">
					<u-upload ref="uUpload1" max-count="1" :action="action" @on-success="handleSuccess1" :auto-upload="true" ></u-upload>
				</u-form-item>
				
				<u-form-item label="理货凭证">
					<u-upload ref="uUpload2" max-count="1" :action="action" @on-success="handleSuccess2" :auto-upload="true" ></u-upload>
				</u-form-item>
				
				<u-form-item label="残损单">
					<u-upload ref="uUpload3" max-count="1" :action="action" @on-success="handleSuccess3" :auto-upload="true" ></u-upload>
				</u-form-item>
				
				<u-form-item label="残损清单">
					<u-upload ref="uUpload4" max-count="1" :action="action" @on-success="handleSuccess4" :auto-upload="true" ></u-upload>
				</u-form-item>
				
				<u-form-item label="溢短单">
					<u-upload ref="uUpload5" max-count="1" :action="action" @on-success="handleSuccess5" :auto-upload="true" ></u-upload>
				</u-form-item>
			</u-form>
			 <view style="height: 50rpx;"></view>
			<u-button :custom-style="customStyle" type="primary" @click="submit">提交</u-button>  
		</view>
	
		<u-select mode="single-column" :list="shipList" v-model="shipShow" @confirm="shipConfirm"
			value-name="id" label-name="shipname"  >
		</u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					height: '80rpx'
				},
				shipList: [],
				action: 'https://api.zlkj-port.com/yqapi/ITally/App/fileUpload',
				file1path: '',
				file2path: '',
				file3path: '',
				file4path: '',
				file5path: '',
				shipShow: false,
				nickName: uni.getStorageSync("nickName"),  // username
				formData: {
					ship: '',	// 船名+航次
					shipid: '' // id
				},
				filePathData:{
					file1: '',
					file2: '',
					file3: '',
					file4: '',
					file5: ''
				}
			};
		},
		onLoad() {
			this.getOptions()
		},
		methods: {
			getOptions(){
				uni.request({
					url: 'https://api.zlkj-port.com/yqapi/ITally/xhtt/Q/ev5mqwCwjBv5Z2o?username=' + this.nickName,
					method: 'get',
					success: (res) => {
						this.shipList = res.data.rows
					}
				})
			},
			submit() {
				if(this.formData.shipid !== '') {
					uni.request({
						url: 'https://api.zlkj-port.com/yqapi/ITally/xhtt/U/KYzIIcZZkoDRGYA',
						method: 'get',
						data: {
							file1: this.file1path,
							file2: this.file2path,
							file3: this.file3path,
							file4: this.file4path,
							file5: this.file5path,
							shipid: this.formData.shipid
						},
						success: res => {
							console.log(res)
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							})
							setTimeout(() => {
								this.formData.ship = ''
							}, 500)
						}
					})
				} else {
					uni.showToast({
						title: '请先选择船名/航次',
						icon: 'none'
					})
				}
			},
			handleSuccess1(response) {
				if(response.id !== null && response.id !== undefined) {
					this.file1path = response.filepath
				}
			},
			handleSuccess2(response) {
				if(response.id !== null && response.id !== undefined) {
					this.file2path = response.filepath
				}
			},
			handleSuccess3(response) {
				if(response.id !== null && response.id !== undefined) {
					this.file3path = response.filepath
				}
			},
			handleSuccess4(response) {
				if(response.id !== null && response.id !== undefined) {
					this.file4path = response.filepath
				}
			},
			handleSuccess5(response) {
				if(response.id !== null && response.id !== undefined) {
					this.file5path = response.filepath
				}
			}, 
			shipConfirm(e) {
				this.formData.ship = e[0].label
				this.formData.shipid = e[0].value
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		padding: 6rpx !important;
	}
	::v-deep .u-btn {
		height: 20px;
	}
.headForm {
		padding: 20rpx;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10;
		background-color: #FFFFFF;
	}	
</style>
